<!-- 业务规则 -->
<template>
  <div class="full-container">
    <page-main :white-bg="false" class="h100 flex-column">
      <div class="flex-row align-start">
        <SearchBarV2
          v-model:fields="searchForm"
          :form-schema="formItems"
          @search="search"
        />
        <div class="btn-wrapper">
          <el-button type="primary" @click="replaceTemplate">
            <el-icon size="12px" class="icon">
              <svg-icon name="icon-replacetemplate" />
            </el-icon>替换模板
          </el-button>
          <el-button type="primary" @click="addBussiness">
            <el-icon size="12px" class="icon">
              <svg-icon name="icon-add" />
            </el-icon>添加业务
          </el-button>
        </div>
      </div>
      <SchemaTable
        ref="schemaTableRef"
        :columns="columns"
        :data="loadData"
        :style="{width:'100%'}"
        row-key="templateCode"
        :row-selection="selectQuestion"
      >
        <!-- 操作 -->
        <template #action="scope">
          <el-switch />
          <el-button :style="{marginLeft: '10px'}" type="primary" text @click.stop="editRule(scope.row)">编辑</el-button>
        </template>
      </SchemaTable>
      <div class="page-wrap">
        <el-pagination
          v-model:currentPage="searchForm.pageIndex"
          v-model:page-size="searchForm.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          background
          layout="total, sizes, prev, pager, next"
          @current-change="search"
          @size-change="handleSizeChange"
        />
      </div>
    </page-main>
  </div>
</template>

<script name="businessRule">
import useList from './composition/useList'
import useOperation from './composition/useOperation'

export default {
  setup() {
    return {
      ...useList(), // 初始化渲染，条件搜索，表格渲染，分页
      ...useOperation() // 搜索表格页按钮、操作
    }
  }
}

</script>

<style scoped lang="scss">
.page-wrap {
  padding: 10px 10px 10px 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: #fff;
  border-radius: 4px;
}
.list-wrap {
  flex: 1;
  overflow: auto;
  height: 100%;
}

</style>

